<script setup>
import { ref, onMounted } from 'vue';
import { getMyHomeworkAPI,assignHomeworkAPI } from '@/api/teacher';
import dayjs from 'dayjs' 
import { ElMessage } from 'element-plus';

const assignmentList = ref([]);
const homeworkForm = ref(null);
const infoDialogVisible = ref(false);
const homeworkInfo = ref({
  title: '',
  description: '',
  dueDate: '',
});
const rules = {
  title: [
    { required: true, message: '请输入作业标题', trigger: 'blur' },
  ],
  description: [
    { required: true, message: '请输入作业描述', trigger: 'blur' },
  ],
  dueDate: [
    { required: true, message: '请选择截止时间', trigger: 'change' },
  ],
};
const loading = ref(false);
const getMyHomework = async () => {
  loading.value = true;
  try {
    const { data } = await getMyHomeworkAPI();
    if (data.code === 200) {
      assignmentList.value = data.data;
    }
    if (data.code === 500) {
      ElMessage.error(data.msg);
    }
  } catch (error) {
    ElMessage.error('获取作业失败');
  } finally {
    loading.value = false;
  }
};
onMounted(() => {
  getMyHomework();
});
// 格式化时间戳
const formatTimestamp = (timestamp) => {
  return dayjs(timestamp).format('YYYY-MM-DD HH:mm')
}
// 处理布置新作业按钮点击
const handleSubmitInfo = async () => {
  const { data } = await assignHomeworkAPI(homeworkInfo.value);
  if (data.code === 200) {
    ElMessage.success('布置作业成功');
    infoDialogVisible.value = false;
    homeworkInfo.value = {
      title: '',
      description: '',
      dueDate: '',
    };
    getMyHomework();
  } else if (data.code === 500) {
    ElMessage.error(data.msg);
  } else {
    ElMessage.error('布置作业失败');
  }
}

// 处理编辑作业
const handleEdit = (row) => {
  // TODO: 跳转到编辑作业页面或打开编辑作业弹窗
  console.log('编辑作业:', row)
}

// 处理删除作业
const handleDelete = (row) => {
  // TODO: 调用删除作业接口
  console.log('删除作业:', row)
  ElMessage.success(`作业 "${row.title}" 已删除 (模拟)`); // 示例提示
}
</script>

<template>
  <div class="assignment-list">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>作业列表</span>
          <el-button type="primary" size="small" @click="infoDialogVisible = true">布置新作业</el-button>
        </div>
      </template>

      <el-table :data="assignmentList" stripe style="width: 100%" :border="true">
        <el-table-column prop="assignmentId" label="ID" width="80"></el-table-column>
        <el-table-column prop="title" label="作业标题"></el-table-column>
        <el-table-column prop="description" label="作业描述"></el-table-column>
        <el-table-column label="布置时间" width="180">
          <template #default="scope">
            <span>{{ formatTimestamp(scope.row.assignedDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="截止时间" width="180">
          <template #default="scope">
            <span>{{ formatTimestamp(scope.row.dueDate) }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column> -->
      </el-table>
    </el-card>
    <el-dialog v-model="infoDialogVisible" title="个人信息" width="40%">
    <el-form :model="homeworkInfo" label-width="80px" label-position="left" :rules="rules" ref="homeworkForm">
      <el-form-item label="作业标题" prop="title">
        <el-input v-model="homeworkInfo.title"></el-input>
      </el-form-item>
      <el-form-item label="作业描述" prop="description">
        <el-input type="textarea" v-model="homeworkInfo.description"></el-input>
      </el-form-item>
      <el-form-item label="截止时间" prop="dueDate">
        <el-date-picker v-model="homeworkInfo.dueDate" type="datetime" placeholder="选择日期时间"></el-date-picker>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="infoDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmitInfo">确认发布</el-button>
      </span>
    </template>
  </el-dialog>
  </div>
</template>

<style scoped>
.assignment-list {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style> 